<template>   
  <div class="dashboard-container">
    <!-- 搜索表单 -->
    <search-form
      v-model="searchForm"
      :loading="loading"
      @search="handleSearch"
      @reset="handleReset"
    >
      <el-form-item label="数据源">
        <el-select
          v-model="searchForm.source"
          placeholder="数据源"
          clearable
        >
          <el-option label="预备库" value="0" />
          <el-option label="标准库" value="1" />
          <el-option label="全部" value="2" />
        </el-select>
      </el-form-item>
  </search-form>
    <!-- 图表展示区域 -->
     <div class="charts-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover">
            <vuln-product-type-chart
              :is_standard="searchForm.source"
              title="漏洞产品类型概览"
              height="300px"
              :textColor="textColor"
            />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover">
            <vuln-poc-chart
              :is_standard="searchForm.source"
              title="漏洞poc分布"
              height="300px"
              :textColor="textColor"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="charts-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-card shadow="hover">
            <vuln-source-chart
              :is_standard="searchForm.source"
              title="漏洞来源统计概览"
              height="300px"
              :textColor="textColor"
            />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-card shadow="hover">
            <vuln-type-chart
              :is_standard="searchForm.source"
              title="漏洞类型统计概览"
              height="300px"
              :textColor="textColor"
            />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-card shadow="hover">
            <vuln-level-chart
              :is_standard="searchForm.source"
              height="300px"
              :textColor="textColor"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 情报收录状态区域 -->
    <div class="status-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <script-status />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
/**
 * 首页仪表盘
 * @module Dashboard
 * @description 首页仪表盘页面，展示漏洞统计和情报收录状态
 */
import { ref, onMounted, computed } from "vue";
import VulnSourceChart from "@/components/charts/VulnSourceChart.vue";
import VulnTypeChart from "@/components/charts/VulnTypeChart.vue";
import VulnLevelChart from "@/components/charts/VulnLevelChart.vue";
import VulnProductTypeChart from "@/components/charts/VulnProductTypeChart.vue";
import VulnPocChart from "@/components/charts/VulnPocChart.vue";
import ScriptStatus from "./components/ScriptStatus.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import { ElLoading } from 'element-plus';
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();

const textColor = computed(() => appStore.echartsTextColor)
// 搜索表单
const searchForm = reactive({
  source: '1',
});
// 处理搜索
const handleSearch = () => {
};
// 处理重置
const handleReset = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  searchForm.source = '1';
  handleSearch();
};
// 漏洞poc数据
const pocData = ref([]);


// 漏洞类型数据
const typeData = ref([]);
// 漏洞等级数据
const levelData = ref([]);

// 页面加载时获取数据
onMounted(() => {
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .dashboard-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--text-color);
  }

  .charts-container {
    margin-bottom: 20px;

    .el-card {
      // margin-bottom: 20px;
    }
  }

  .status-container {
    margin-bottom: 10px;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
}
</style>
